<script lang="ts" setup>
import { getIcon } from '@/api/assets/assets';
import { useCampStore } from '@/stores/CampDetailStore';
import { message } from 'ant-design-vue';
import { computed, onMounted, ref } from 'vue';

// 获取 Pinia store 实例
const CampStore = useCampStore();

// 从 store 中获取状态
const { startTime, endTime } = CampStore;

// 获取当前时间
const currentTime = new Date().getTime();

// 计算作业状态，返回 "未开始"、"正在进行中" 或 "已结束提交"
const submissionStatus = computed(() => {
  const start = new Date(startTime).getTime();
  const end = new Date(endTime).getTime();

  if (currentTime < start)
    return { text: '未开始', color: '#81838F' }; // 灰色
  else if (currentTime >= start && currentTime <= end)
    return { text: '正在进行中', color: '#5ACC8F' }; // 绿色
  else
    return { text: '已结束提交', color: '#81838F' }; // 灰色
});

// 作业要求按钮事件
const homeworkRequirement = () => {
  window.open('https://w1wqv7lf1zr.feishu.cn/wiki/O7gMwD9ruiXoEWksRNVcKHkenkM?from=from_copylink', '_blank');
};

// 控制弹窗显示
const isModalVisible = ref(false);

// 选择的作业选项
const selectedTask = ref<string | null>(null);

// 提交作业按钮事件
const submitWork = () => {
  isModalVisible.value = true; // 显示弹窗
};

// 确认选择后的操作，根据选项打开不同的网页
const handleOk = () => {
  if (!selectedTask.value) {
    message.error('请选择一个平台！');
    return;
  }

  // 根据选择的选项打开不同的链接
  switch (selectedTask.value) {
    case 'baidu':
      window.open('https://docs.qq.com/form/page/DZExrRGdTUkZLV3VT', '_blank');
      break;
    case 'kedaxunfei':
      window.open('https://docs.qq.com/form/page/DZEVNYk5NZ05IWVd6', '_blank');
      break;
    case 'task3':
      window.open('https://example.com/task3', '_blank');
      break;
    case 'task4':
      window.open('https://example.com/task4', '_blank');
      break;
    case 'task5':
      window.open('https://example.com/task5', '_blank');
      break;
    default:
      message.error('未知的平台选项');
      break;
  }
  isModalVisible.value = false; // 关闭弹窗
};

// 取消操作
const handleCancel = () => {
  isModalVisible.value = false;
};

// 定义图片变量
const img = ref<string | undefined>(undefined);
const fetchIcon = async () => {
  try {
    const data = await getIcon(['trainingCamp1.png'])
    img.value = data['trainingCamp1.png']
  }
  catch (error) {
    console.error('API 调用错误:', error)
  }
}

onMounted(() => {
  fetchIcon()
})
</script>

<template>
  <div class="submission-card">
    <!-- 左侧图片 -->
    <img :src="img" alt="作业图片" class="submission-image">

    <!-- 右侧内容 -->
    <div class="submission-content">
      <!-- 作业标题 -->
      <h2 class="submission-title">
        作业提交
      </h2>

      <!-- 作业描述 -->
      <p class="submission-description">
        请在电脑端平台提交作业！
      </p>

      <!-- 提交状态和按钮容器 -->
      <div class="status-and-buttons">
        <!-- 提交状态 -->
        <div class="submission-status">
          <span class="status-dot" :style="{ backgroundColor: submissionStatus.color }" />
          <span>{{ submissionStatus.text }}</span>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="isModalVisible"
      title="请选择您的提交作业平台"
      @cancel="handleCancel"
    >
      <p>其他平台作业随课程进行陆续布置</p>
      <a-select v-model:value="selectedTask" placeholder="请选择您的平台" style="width: 100%">
        <!-- 保留第一个选项 -->
        <a-select-option value="baidu">
          百度文心智能体平台
        </a-select-option>

        <a-select-option value="kedaxunfei">
          科大讯飞星火智能体平台
        </a-select-option>
        <!-- 使用 style="display: none" 隐藏选项 -->
        <a-select-option value="task3" style="display: none;">
          作业3
        </a-select-option>
        <a-select-option value="task4" style="display: none;">
          作业4
        </a-select-option>
        <a-select-option value="task5" style="display: none;">
          作业5
        </a-select-option>
      </a-select>

      <!-- 自定义 footer -->
      <template #footer>
        <a-button type="primary" @click="handleOk">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.submission-card {
  display: flex; /* 设置为水平排列 */
  align-items: flex-start; /* 垂直方向上顶部对齐 */
  padding: 1.5rem;
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 12px; /* 圆角 */
  background-color: #fff;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.submission-image {
  width: 9vw; /* 使用相对视口宽度的单位 vw 来控制图片宽度 */
  height: 9vw; /* 使用相对视口宽度的单位 vw 来控制图片高度，确保宽高一致 */
  object-fit: cover; /* 保持图片比例，不变形 */
  border-radius: 8px; /* 圆角 */
  margin-right: 1.5rem; /* 图片与右侧内容的间距，使用 rem 单位 */
}

.submission-content {
  flex: 1; /* 右侧内容占据剩余宽度 */
  display: flex;
  flex-direction: column;
}

.submission-title {
  font-size: 1.5rem; /* 标题字号 */
  font-weight: bold;
  margin-bottom: 1rem; /* 标题与描述的间距 */
}

.submission-description {
  font-size: 1rem; /* 描述字号 */
  color: #666;
  line-height: 1.5; /* 增加行高，提升可读性 */
  margin-bottom: 1.5rem; /* 描述与提交状态的间距 */
}

/* 添加一个新的容器，用于水平排列提交状态和按钮 */
.status-and-buttons {
  display: flex; /* 设置为水平排列 */
  align-items: center; /* 垂直方向居中对齐 */
  justify-content: space-between; /* 水平方向两端对齐 */
}

/* 提交状态样式 */
.submission-status {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #999;
}

.status-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #d9d9d9; /* 状态点的颜色 */
  margin-right: 0.5rem; /* 状态点与文本之间的间距 */
}
</style>
